<template>
  <div>
    <header1>{{ movieObj.nm }}</header1>
    <div>
      <div class="left_one">
        <span></span>
        <span>19.9元起购票</span>
        <span>打开App></span>
      </div>
    </div>
    <div class="movie-detail">
      <div class="mask"></div>
      <div class="poster-bg" :style="bg"></div>
      <div class="detail">
        <img class="poster" :src="movieObj.img" alt="" />
        <div class="content">
          <div class="title line-ellipsis">{{ movieObj.nm }}</div>
          <div class="public line-ellipsis">{{ movieObj.enm }}</div>
          <div class="score line-ellipsis">
            {{ movieObj.sc }}
            <span class="no-score">{{ movieObj.scoreLabel }}</span>
          </div>
          <div class="type line-ellipsis">{{ movieObj.cat }}</div>
          <div class="public line-ellipsis">
            {{ movieObj.src }}/{{ movieObj.dur }}分钟
          </div>
          <div class="public line-ellipsis">{{ movieObj.pubDesc }}</div>
        </div>
      </div>
      <div class="movie-detail-arrow">
        <span class="arrow-bg"></span>
      </div>
    </div>
    <div class="date-list">
      <ul>
        <li
          v-for="(item, index) in dateArr"
          :key="item.date"
          @click="getCinemaData(item.date, index)"
          :class="index == activeid ? 'active' : ''"
        >
          <div>{{ item.date | format(index) }}</div>
        </li>
      </ul>
    </div>
    <div class="right_one">
      <div class="right_two">全程</div>
      <div class="right_three">品牌</div>
      <div class="right_four">特色</div>
    </div>
    <!-- 影院信息 -->
    <ul class="cinemalist">
      <li v-for="item in cinemaArr" :key="item.id">
        <div class="mv">
          <span>{{ item.nm }}</span>
          <span>{{ item.sellPrice }}
            <span class="mv_s2">元起</span>
          </span>
        </div>
        <div class="mv_one">{{ item.addr }}</div>
        <div class="mv_two">
          <div v-for="(el, index) in item.labels" :key="index">
            <span :class="el.color=='#579daf' ? 'lanColor' :'oColor'">{{ el.name }}</span>
          </div>
        </div>
        <div class="mv_four">
            <span class="mv_five">{{ item.promotion.cardPromotionTag }}</span>
        </div>
        <div class="mv_three">近期场次：{{ item.showTimes }}</div>
      </li>
    </ul>
  </div>
</template>
<script>
import axios from "axios";
import header1 from "@/components/commonh/header1";
export default {
  name: "item",
  data: function () {
    return {
      movieObj: {}, //电影的一条记录
      dateArr: [], //保存上映日期的数据
      bg: "",
      cinemaArr: [], //影院信息
      id: 0, //电影id
      activeid: 0, //当前是第几天
    };
  },
  filters: {
    //过滤器  将 年月日转成  星期再加 月日
    format(value, index) {
      console.log("过滤器触发了", value);
      var arr = value.split("-");
      var str = "";
      var jintian = ["今天", "明天", "后天"];
      //传过来的日期
      var d1 = new Date(value);
      //今天的日期
      var dd = new Date();
      var y = dd.getFullYear();
      var m = dd.getMonth() + 1;
      var d = dd.getDate();

      var d2 = new Date(y + "-" + m + "-" + d);
      console.log(y + "-" + m + "-" + d);
      //0 今天  1 明天  2 后天
      var iday = parseInt(parseInt(d1 - d2) / 1000 / 60 / 60 / 24);
      console.log(iday);
      if (jintian[iday] != undefined) {
        str = jintian[iday];
      } else {
        str = `周${"日一二三四五六".charAt(new Date(value).getDay())}`;
      }
      str += `${arr[1]}月${arr[2]}日`;
      return str;
    },
  },
  methods: {
    //重新获取影院数据
    getCinemaData(date, index) {
      this.activeid = index;
      console.log(date);
      this.getData(date)
    },
    //0.获取影院信息的函数
    getData(date) {
      axios.get(`/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId=${this.$route.params.id}&serviceId=-1&stationId=-1&showDate=${date}&cityId=30&ci=30`)
      .then(res=>{
        console.log(res.data.data.cinemas);
        this.cinemaArr=res.data.data.cinemas
        console.log(this.cinemaArr);
      })
    },
  },
  mounted() {
    //获取 首页传过来的参数
    var id = this.$route.params.id;
    axios.get("/api/mtrade/mmdb/movie/v5/" + id + ".json").then((res) => {
      console.log(res);
      this.movieObj = res.data.data.movie;
      this.movieObj.img = this.movieObj.img.replace("w.h", "110.150");
      this.bg = `background: url(${this.movieObj.img});`;
    });
    //获取 上映日期的数据
    axios
      .get(
        "/api/mtrade/mmcs/show/v1/movie/showdays.json?movieId=" +
          id +
          "&channelId=4&cityId=30"
      )
      .then((res) => {
        console.log("date", res.data.data.dates);
        this.dateArr = res.data.data.dates;
        //获取影院信息列表
      axios.get(`/api/mtrade/mmcs/cinema/v1/select/movie/cinemas.json?limit=20&offset=0&utm_term=7.5&client=iphone&channelId=4&areaId=-1&brandId=-1&districtId=-1&hallType=-1&lineId=-1&movieId=${this.$route.params.id}&serviceId=-1&stationId=-1&showDate=${this.dateArr[0].date}&cityId=30&ci=30`)
      .then(res=>{
        console.log(res.data.data.cinemas);
        this.cinemaArr=res.data.data.cinemas
        console.log(this.cinemaArr);
      })
      });
      
  },
  components: {
    header1,
  },
};
</script>

<style scoped>
div {
  box-sizing: border-box;
}
.movie-detail {
  position: relative;
  height: 188px;
  font-size: 12px;
  overflow: hidden;
  cursor: pointer;
}
.movie-detail .mask {
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 100%;
  background-color: #333;
}
.poster-bg {
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
  position: absolute;
  -webkit-filter: blur(1.2rem);
  filter: blur(1.2rem);
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.55;
}
.movie-detail .detail {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  padding: 19px 30px 19px 15px;
  height: 176px;
}
.movie-detail .detail .poster {
  width: 110px;
  height: 150px;
  background-size: 100% 100%;
}
.movie-detail .detail .content {
  overflow-x: hidden;
  margin-left: 12.5px;
  line-height: 1;
  color: #fff;
}
.movie-detail .detail .title {
  font-size: 20px;
  margin-top: 2px;
  font-weight: 700;
  overflow: hidden;
}
.movie-detail .detail .public {
  margin-top: 6px;
  opacity: 0.8;
}
.line-ellipsis {
  -o-text-overflow: ellipsis;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.movie-detail .detail .score {
  margin-top: 11px;
  font-size: 18px;
  font-weight: 700;
  color: #fc0;
}
.movie-detail .detail .type {
  margin-top: 10px;
  opacity: 0.8;
}
.movie-detail .detail .public {
  margin-top: 10px;
  opacity: 0.8;
}
.movie-detail .movie-detail-arrow {
  position: absolute;
  width: 10px;
  height: 14.6px;
  right: 15px;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}
.movie-detail .movie-detail-arrow .arrow-bg {
  display: block;
  width: 100%;
  height: 100%;
  background: url();
  background-size: cover;
}

.left_one {
  width: 100%;
  height: 60px;
  line-height: 60px;
  background-color: #fff;
  font-size: 14px;
  color: #666666;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  /* align-items: center; */
}
.left_one span:nth-of-type(1) {
  width: 30%;
  background: url("../assets/3.png") no-repeat;
  background-size: 94px 39px;
  background-position: -25% 50%;
}
.header2 span:nth-of-type(2) {
  padding-left: 25px;
  font-weight: 700;
}
.header2 span:nth-of-type(3) {
  font-size: 17px;
  color: #b37e7e;
  font-weight: 700;
}
.date-list {
  width: 100%;
  height: 45px;
  line-height: 45px;

  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
.date-list ul {
  width: 100%;
  display: flex;
  overflow: hidden;
  overflow: scroll;
}
.date-list div {
  width: 150px;
}
.date-list ul li {
  width: 30%;
  height: 43px;
  font-size: 14px;
  margin-left: 10px;
}
.date-list ul li.active {
  border-bottom: 2px solid #f03d37;
  color: #f03d37;
}
.right_one {
  width: 100%;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  display: flex;
  justify-content: space-around;
  border-bottom: 1px solid rgba(99, 98, 98, 0.3);
}
.right_three {
  position: relative;
}
.right_one > .right_three::before {
  content: "";
  display: inline-block;
  position: absolute;
  height: 20px;
  top: 10px;
  left: -40px;
  border-left: 1px solid #e8e8e8;
}
.right_four {
  position: relative;
}
.right_four::before {
  content: "";
  display: inline-block;
  position: absolute;
  height: 20px;
  top: 10px;
  left: -40px;
  border-left: 1px solid #e8e8e8;
}
.cinemalist {
  width: 100%;
  height: 142px;
}
.mv {
  width: 100%;
  height: 23px;
  line-height: 23px;
  font-size: 16px;
  color: #000;
  display: flex;
  justify-content: space-around;
 
 
}

.mv_s2{
  font-size: 12px;

 
}
.mv > span:nth-of-type(1) {
  width:208px;
  padding-left: 5px;
  padding-top: 4px;
  padding-bottom: 30px; 
  display: inline-block;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.mv > span:nth-of-type(2) {
  width: 30%;
  font-size: 18px;
  color: #f03d37;
  text-align: center;
  padding-left: 15px;
  padding-top: 4px;
  padding-bottom: 30px; 
}
.mv_one {
  width: 100%;
  font-size: 13px;
  padding-top: 10px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  padding-left: 15px;
  padding-bottom: 10px;
}
.mv_two {
  width: 100%;
  display: flex;
  padding-left: 15px;
}
.mv_two span{
  padding: 0 5px;
  margin-right: 3px;
}
.mv_two .lanColor{
  color: #579daf;
  border: 1px solid #579daf;
}
.mv_two .oColor{
  color: #ff9900;
  border: 1px solid #ff9900;
}
.mv_four{
  padding-top: 5px;
  padding-left: 15px;
    font-weight: 300;
}
.mv_three{
  padding-left: 15px;
  font-weight: 300;
}
</style>


